<template>
  <div id="components-form-demo-advanced-search">
		<a-spin :spinning="loading">
			<a-form class="ant-advanced-search-form" :form="form">
				<a-divider orientation="left"><span class="text-bold">系统信息</span></a-divider>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="系统名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="系统名称" v-decorator="['systemName',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="名称缩写" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="名称缩写" v-decorator="['systemNameShort',{rules: [{required: true, message: ''}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="系统版本" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="系统版本" v-decorator="['systemVersion',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="系统日期" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="系统日期" v-decorator="['systemDate',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="平台图标" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="平台图标" v-decorator="['systemLogo',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="浏览器图标" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="浏览器图标" v-decorator="['browserIcon',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="系统说明" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-textarea placeholder="系统说明" v-decorator="['systemExplain']" :auto-size="{ minRows: 3, maxRows: 3 }" />
						</a-form-item>
					</a-col>
				</a-row>
				
				<a-divider orientation="left"><span class="text-bold">公司信息</span></a-divider>
				<a-row :gutter="24">
					<a-col :span="12">
						<a-form-item label="公司名称" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="公司名称" v-decorator="['companyName',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="公司官网" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-input placeholder="公司官网" v-decorator="['companyWebsite',{rules: [{required: true}]}]" />
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="公司说明" :label-col="labelCol" :wrapper-col="wrapperCol">
							<a-textarea placeholder="公司说明" v-decorator="['companyExplain']" :auto-size="{ minRows: 3, maxRows: 3 }" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24" :style="{ textAlign: 'right' }">
						<a-button type="primary" @click="save">
							保存
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</a-spin>
  </div>
</template>
<script>
import pick from "lodash.pick";
// 表单字段
const fields = ["systemName","systemLogo","systemVersion","systemDate","systemNameShort","browserIcon","systemExplain","companyName","companyWebsite","companyExplain"];
export default {
  data() {
    return {
			labelCol: {
				flex: '100px'
			},
			wrapperCol: {
				flex: 'auto'
			},
      form: this.$form.createForm(this),
			model: {},
			loading: false
    };
  },
	created() {
	  fields.forEach((v) => this.form.getFieldDecorator(v));
		this.$post("/system/config/selectAll", {}).then(res => {
			res.forEach(item => {
				this.model[item.code] = item.value
			})
			this.form.setFieldsValue(pick(this.model, fields))
		})
	},
  methods: {
    save(){
			this.form.validateFields((err, values) => {
				if (!err) {
					this.loading = true
					let param = []
					for(let key in values){
						param.push({
							code: key,
							value: values[key]
						})
					}
					this.$post(
						"/system/config/save",
						{
							param: JSON.stringify(param)
						}
					).then(res => {
						this.$message.success(res.message);
						this.loading = false
					})
				}else{
					this.$message.warning("请将信息填写完整！");
				}
			});
		}
  },
};
</script>
<style lang="less" scoped>
.ant-advanced-search-form {
  padding: 0 24px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
/deep/.ant-form-explain{
	display: none !important;
}
</style>